import React from 'react';
import ShoppingList from './ShoppingList'
import Picture from './Picture'
import { Card, Tabs } from 'antd'

class Content extends React.Component {
    render() {
        const picture = {
            src: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png'
        }

        const style = {
            width: '300px',
            boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2)',
            border: '1px solid #e8e8e8',
            margin: '10px 100px'
        }

        return (
            <div>
                <ShoppingList name="Sunny"/>
                <Picture src={picture.src}>
                    <br/>
                    <span>123</span>
                </Picture>
                <Card style = {style} actions = {[<a>操作一</a>, <a>操作二</a>]}>
                    <Card.Meta
                        avatar={<img alt='' style={{ width: '64px', height: '64px', borderRadius: '32px'}}
                                src="https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png"
                                />}
                        title="Alipay"
                        description="移动端页面UI组件标准"
                    />
                </Card>
                <Tabs>
                    {/* <TabPane tab="Tab1" key="1">Content for tab1</TabPane>
                    <TabPane tab="Tab2" key="2">Content for tab2</TabPane> */}
                </Tabs>
            </div>
        );
    }
}

export default Content;